<script lang="ts" setup>

import DropdownMenu from '../../../components/normal/DropdownMenu.vue'
import { changeSystemTheme, themeList } from '../../../common/manager/ThemeManager'


// vueuse-color-scheme
const changeHandler = (val:any) => {
  changeSystemTheme(val.code)
}

</script>

<template>
  <el-dropdown placement="bottom">
    <template #default>
      <v-icon icon="huanfu"
              button
              back
              class="top-icon" />
    </template>
    <template #dropdown>
      <dropdown-menu :source="themeList" @change="changeHandler" />
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss">
.top-icon{
  @include hor-group(center);
  font-size:20px;
  margin-left: 10px;
  margin-top: 2px;
  outline: none!important;
  color:#898ea4!important;
}
</style>
